<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>deui-switch</title>
    <link rel="stylesheet" href="../../css/switch/deui-switch.css">
    <link rel="stylesheet" href="../../css/deui.css">
</head>
<body>
<div id="vm">
    <input type="checkbox" class="deui-switch deui-switch-green" v-model="powerchecked">
    <span class="deui-testswitch" @click="switchtoggle()"></span>
    <!-- <input type="checkbox" class="deui-switch deui-shadow deui-switch-green">
    <span class="deui-testswitch" onclick="switchtoggle()"></span> -->
</div>
</body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <!-- <script src="http://code.jquery.com/jquery-1.4.1.js"></script> -->
  <script>
  var vm = new Vue({
      el: '#vm',
      data: {
          powerchecked:false
      },
      created: function() {
          var _this = this;
          apiready = function() {
              _this.init();
              api.parseTapmode();
              if ('addEventListener' in document) {
                  document.addEventListener('DOMContentLoaded', function() {
                      FastClick.attach(document.body);
                  }, false);
              }
          }
      },
      methods: {
          init: function() {
              var _this = this;
          },
          switchtoggle() {
            var _this = this;
            if(_this.powerchecked){
                _this.powerchecked=false
            }else{
                _this.powerchecked=true
            }
          }
      }
  })
  // function switchtoggle() {
  //   if($(".deui-switch").attr("checked")){
  //     $(".deui-switch").attr("checked",false)
  //   }else{
  //     $(".deui-switch").attr("checked",true)
  //   }
  // }
</script>

</html>
